<template>
  <div>
    <div class="ui_forget_password" v-if="!smsCodeIsValid">
      <van-nav-bar title="重置密码">
        <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
      </van-nav-bar>
      <div class="forget_password_handle_container">
        <div class="input_container mobile_input_container">
          <input
            class="input_item"
            type="text"
            placeholder="请输入手机号"
            maxlength="11"
            v-model="mobileNo"
            @blur="mobileNoInputBlur"
            @input="mobileNoInputChange">
          <SmsCode :mobileNoIsValid="mobileNoIsValid" :mobileNo="mobileNo" :codeType="'forgetThePassword'"></SmsCode>
        </div>
        <div class="input_container sms_code_input_container">
          <input
            class="input_item"
            type="text"
            placeholder="短信验证码"
            maxlength="6"
            v-model="smsCode">
        </div>
        <div class="validate_btn_box">
          <button
            class="validate_btn"
            :class="mobileNoIsValid ? '' : 'disable'"
            :disabled="!mobileNoIsValid"
            @click="submitValidate">验证
          </button>
        </div>
      </div>
      <ErrorPopup :isError="isError" :errorMessage="errorMessage"></ErrorPopup>
    </div>
    <SetPassword v-if="smsCodeIsValid" @showSmsCodeValidate="showSmsCodeValidate" :code="smsCode" :mobileNo="mobileNo" />
  </div>
</template>

<script type="text/babel">
  import SmsCode from 'component/login/SmsCode';
  import ErrorPopup from 'component/login/ErrorPopup';
  import SetPassword from './SetPassword';
  import { efficacyCode } from 'services/sms';

  export default {
    name: 'ForgetPassword',
    components: { SmsCode, ErrorPopup, SetPassword },
    data() {
      return {
        mobileNo: '',
        smsCode: '',
        isError: false,
        errorMessage: '',
        mobileNoIsValid: false,
        smsCodeIsValid: false,
      };
    },
    methods: {
      mobileNoInputChange() {

        this.mobileNoIsValid = this.validateMobileNo();

      },
      mobileNoInputBlur() {
        if (!this.validateMobileNo()) {
          this.isError = true;
          this.errorMessage = '请填写正确的手机号码';
          setTimeout(() => {
            this.isError = false;
            this.errorMessage = '';
          }, 3000);
        }
      },
      validateMobileNo() {

        const mobileNoReg = /^[1][34578][0-9]{9}$/;

        return mobileNoReg.test(this.mobileNo);

      },
      back() {
        this.$router.go(-1);
      },
      submitValidate() {
        const { smsCode, mobileNo } = this;

        efficacyCode({ mobileNo, code: smsCode, codeType: 'forgetThePassword' }).then(() => {
          this.showSmsCodeValidate(true);
        });
      },
      showSmsCodeValidate(show) {
        this.smsCodeIsValid = show;
      }
    }
  };
</script>

<style scoped lang="less">
  .ui_forget_password {
    .forget_password_handle_container {
      margin-top: 30px;
      .input_container {
        display: flex;
        align-items: center;
        width: 100%;
        height: 85px;
        padding: 0 30px;
        background-color: #fff;
        .input_item {
          flex: 1 0 auto;
          height: 100%;
          padding: 30px 0;
          outline: none;
          border: none;
          font-size: 26px;
        }
      }
      .mobile_input_container {
        border-bottom: 1px solid #e1e1e1;
        border-radius: unset;
      }
      .validate_btn_box {
        margin-top: 60px;
        padding: 0 30px;
        .validate_btn {
          width: 100%;
          height: 90px;
          outline: none;
          border: none;
          border-radius: 45px;
          background-color: #f7a427;
          color: #fff;
          font-size: 36px;
          &.disable {
            background-color: #fbcb82;
          }
        }
      }
    }
  }
</style>
